<template>
  <el-dialog
    title="订单详情"
    width="80%"
    class="el-dialog-box"
    :visible.sync="dialogVisible"
  >
    <div class="container">
      <div class="new-page-title">
        <div class="line" />
        <div class="text">基础信息</div>
      </div>
      <div class="mod-order-orderInfo">
        <div class="content">
          <div :class="['order-info']">
            <div :class="['info-item']">
              <div class="item">
                <div class="text">门店名称：</div>
                <div class="res">
                  {{ dataForm.shopAppName || dataForm.shopName }}
                </div>
              </div>
              <div class="item">
                <div class="text">门店地址：</div>
                <div class="res">{{ dataForm.shopAddress }}</div>
              </div>
            </div>
            <div :class="['info-item']">
              <div class="item">
                <div class="text">订单编号：</div>
                <div class="res">{{ dataForm.orderNumber }}</div>
              </div>
              <div class="item">
                <div class="text">订单状态：</div>
                <div class="res">
                  {{
                    [
                      "待接单",
                      "正在赶往商家",
                      "到店取货中",
                      "配送中",
                      "已完成",
                      "订单取消",
                      "骑手拒绝接单（待接单）",
                    ][dataForm.status]
                  }}
                </div>
              </div>
              <div class="item">
                <div class="text">预计送达时间：</div>
                <div class="res">{{ dataForm.estimatedDeliveryTime }}</div>
              </div>
            </div>
            <div :class="['info-item']">
              <div class="item">
                <div class="text">下单时间：</div>
                <div class="res">{{ dataForm.createTime }}</div>
              </div>
              <div class="item">
                <div class="text">拒绝原因：</div>
                <div class="res">{{ dataForm.refuseReason }}</div>
              </div>
              <!-- <div class="item">
                <div class="text">接单时间：</div>
                <div class="res">--</div>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="new-page-title">
        <div class="line" />
        <div class="text">收货信息</div>
      </div>
      <div class="mod-order-orderInfo">
        <div class="content">
          <div :class="['order-info']">
            <div :class="['info-item']">
              <div class="item">
                <div class="text">收 货 人：</div>
                <div class="res">{{ dataForm.nickName }}</div>
              </div>
            </div>
            <div :class="['info-item']">
              <div class="item">
                <div class="text">联系电话：</div>
                <div class="res">{{ dataForm.userMobile }}</div>
              </div>
            </div>
            <div :class="['info-item']">
              <div class="item">
                <div class="text">收货地址：</div>
                <div class="res">{{ dataForm.userAddr }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="new-page-title">
        <div class="line" />
        <div class="text">付款信息</div>
      </div>
      <div class="mod-order-orderInfo">
        <div class="content">
          <div :class="['order-info']">
            <div :class="['info-item']">
              <div class="item">
                <div class="text">实付金额：</div>
                <div class="res">¥{{ dataForm.actualTotal }}</div>
              </div>
            </div>
            <div :class="['info-item']">
              <div class="item">
                <div class="text">付款方式：</div>
                <div class="res">
                  <!-- {{
                    [
                      $t("order.pointsPayment"),
                      $t("order.wecProPay"),
                      $t("order.aliPay"),
                      $t("order.wechatScanCodePayment"),
                      $t("order.wechatH5Payment"),
                      $t("order.weclAccountPay"),
                      $t("order.alipayH5Payment"),
                      $t("order.alipayAPPPayment"),
                      $t("order.wechatAPPPayment"),
                      $t("order.balancePayment"),
                      $t("order.payPalPayment"),
                    ][dataForm.payType]
                  }} -->
                  {{
                    dataForm.payType == 9
                      ? $t("order.balancePayment")
                      : $t("order.unionpay")
                  }}
                </div>
              </div>
            </div>
            <div :class="['info-item']">
              <div class="item">
                <div class="text">付款时间：</div>
                <div class="res">{{ dataForm.payTime }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="new-page-title">
        <div class="line" />
        <div class="text">商品信息</div>
      </div>
    </div>

    <!-- 商品信息 -->
    <div class="goods-list">
      <el-table :data="prodList" border>
        <el-table-column prop :label="this.$i18n.t('order.product')">
          <template slot-scope="scope">
            <div class="df">
              <prod-pic
                height="60"
                class="prod-pic"
                :pic="scope.row.pic"
              ></prod-pic>
              <div class="name">
                <div>
                  <span
                    v-if="scope.row.giveawayOrderItemId"
                    class="gift-icon"
                    >{{ $t("order.giveawayPord") }}</span
                  >
                  <span>{{ scope.row.prodName }}</span>
                  <span class="sku" v-if="scope.row.skuName"
                    >({{ scope.row.skuName }})</span
                  >
                  <span>
                    <div
                      v-if="scope.row.properties"
                      style="font-size: 12px; margin-top: 4px; color: #999"
                    >
                      {{ $t("prodSku.prodSku") }}:
                      {{ scope.row.properties }}
                    </div>
                  </span>
                </div>
                <div
                  class="order-status"
                  v-if="
                    scope.row.returnMoneySts &&
                    scope.row.returnMoneySts < 6 &&
                    scope.row.returnMoneySts > 0
                  "
                >
                  {{
                    [
                      "",
                      $t("refundOrderDetail.buyerApply"),
                      $t("order.sellerAccepts"),
                      $t("refundOrderDetail.buyerDelivery"),
                      $t("order.sellerReceivesGoods"),
                      $t("order.refundsuccessfully"),
                    ][scope.row.returnMoneySts]
                  }}
                </div>
              </div>
            </div>
            <!-- 赠品 -->
            <div v-if="dataForm.orderItems.length > 1" class="gift-prod">
              <div v-for="item in scope.row.giveawayList" class="item">
                <span class="name"
                  >{{ "【" + $t("order.giveawayPord") + "】"
                  }}{{ item.prodName }}</span
                >
                <span class="num">×{{ item.prodCount }}</span>
              </div>
            </div>
            <!-- / 赠品 -->
          </template>
        </el-table-column>
        <el-table-column
          prop="price"
          :label="this.$i18n.t('order.unitPrice')"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.giveawayOrderItemId ? "-" : scope.row.price
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="count"
          :label="this.$i18n.t('order.quantity')"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.prodCount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="count"
          :label="this.$i18n.t('order.preferentialAmount')"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.giveawayOrderItemId ? "-" : scope.row.shareReduce
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="totalPrice"
          :label="this.$i18n.t('order.totalPrice')"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.giveawayOrderItemId ? "-" : scope.row.productTotalAmount
            }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script>
import ProdPic from "@/components/prod-pic";
export default {
  components: { ProdPic },
  data() {
    return {
      id: "",
      dialogVisible: false,
      dataForm: {},
      prodList: [],
    };
  },
  mounted() {},
  methods: {
    open(id) {
      this.id = id;
      this.dialogVisible = true;
      this.getInfo();
    },
    getInfo() {
      this.$http({
        url: this.$http.adornUrl("/platform/rider/order/info?id=" + this.id),
        method: "get",
      }).then(({ data }) => {
        this.dataForm = data;
        this.prodList = data.orderItems;
        console.log(data);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.new-page-title {
  background-color: white;
  margin-bottom: 0;
}
.mod-order-orderInfo {
  height: 100%;
  width: 100%;
  font: 14px Arial, "PingFang SC", "Hiragino Sans GB", STHeiti,
    "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  color: #333;

  .order-number {
    display: flex;
    align-items: center;
    font-size: 14px;
  }

  .order-number .text {
    color: #999;
  }

  .order-number .number,
  .order-number .time {
    display: flex;
    align-items: center;
  }

  .order-number .time {
    margin: 0 15px;
  }

  .order-state {
    position: relative;
    margin-top: 15px;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
  }

  .order-state .state-box {
    padding: 20px 15px;
    width: 40%;
    border-right: 1px solid #eee;
  }

  .order-state .state-box .state {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
  }

  .order-state .state-box .state-des {
    margin-top: 10px;
    color: #999;
  }

  .order-state .state-box .actions {
    margin-top: 15px;
  }

  .order-state .state-box .actions .item {
    display: flex;
    align-items: center;
  }

  .order-state .state-box .actions .item .el-button--text {
    cursor: pointer;
  }

  .order-state .state-box .actions .item .item-btn {
    padding: 3px 10px;
    border: 1px solid #eee;
    border-radius: 2px;
  }

  .order-state .state-steps {
    flex: 1;
    margin-left: -80px;
  }

  .order-state .state-steps .el-form-item {
    margin-bottom: 0;
  }

  .order-info {
    background: #f7f8fa;
    display: flex;
    padding: 20px;
  }

  .order-info .info-item {
    width: 30%;
    padding-right: 30px;
  }

  .order-info .info-item .item {
    margin: 8px 0;
    display: flex;
    line-height: 20px;
  }

  .order-info .info-item .item .text {
    // width: auto;
    // min-width: 70px;
    color: #33333389;
    white-space: nowrap;
  }
  .order-info .info-item .item .res {
    word-break: break-word;
    margin-left: 4px;
  }

  .goods-list {
    margin-top: 20px;
  }

  .goods-list .df {
    display: flex;
    align-items: center;
  }

  .goods-list .df .name {
    margin-left: 10px;
    line-height: 20px;
    flex: 1;
  }
  .goods-list .df .name .gift-icon {
    display: inline-block;
    min-width: 34px;
    max-height: 21px;
    text-align: center;
    padding: 4px;
    border-radius: 4px;
    background: #e43130;
    color: #fff;
    font-size: 13px;
    line-height: 1em;
    margin-right: 5px;
  }

  .goods-list .df .name .sku {
    margin-left: 5px;
    color: #999;
  }

  .goods-list .goods-total {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }

  .goods-list .goods-total .item {
    display: flex;
    align-items: center;
    color: #999;
    margin-top: 5px;
  }

  .goods-list .df .prod-pic {
    max-width: 60px;
    margin-right: 6px;
    flex: 1;
  }

  .goods-list .goods-total .item .text {
    width: 200px;
    text-align: right;
  }

  .goods-list .goods-total .item .number {
    width: 130px;
    text-align: right;
  }

  .goods-list .goods-total .item.act-price {
    margin-top: 20px;
    color: #333;
    font-weight: 600;
  }

  .goods-list .goods-total .item.act-price .number {
    color: #c00;
  }
}
// 小屏样式适配
.flex-wrap {
  flex-wrap: wrap;
}
.small-width {
  width: 50% !important;
  margin-bottom: 10px;
}
</style>
